<template>
  <div class="div_box">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">Home</el-breadcrumb-item>
      <el-breadcrumb-item>Book Manage</el-breadcrumb-item>
      <el-breadcrumb-item>{{this.flushBookTypeMark}}</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加 -->
      <el-row :gutter="20">
        <el-col :span="10">
          <el-input placeholder="请输入内容" clearable>
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="14">
          <el-button type="primary" @click="showAddBox" placement="top">Add Book</el-button>
          <el-button @click="drawer = true" type="primary">查看分类</el-button>
        </el-col>
      </el-row>
      <div class="container">
        <!-- 显示信息 -->
        <el-table :data="bookList" stripe border>
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="pictureUrl" label="pic" width="200px">
            <template scope="scope">
              <img :src="scope.row.pictureUrl" width="200px" height="100px" />
            </template>
          </el-table-column>
          <el-table-column label="bookInfoId" prop="bookInfoId"></el-table-column>
          <el-table-column label="bookName" prop="bookName"></el-table-column>
          <el-table-column label="bookTypeName" prop="bookTypeName"></el-table-column>
          <el-table-column label="bookTypeCode" prop="bookTypeCode"></el-table-column>
          <el-table-column label="操作">
            <template scope="scope2">
            <el-button type="primary" round size="mini" @click="goToDetail(scope2.row.bookInfoId)">See Detail</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <!-- 抽屉 -->
    <el-drawer title="书籍分类" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
      <!-- 读取已有种类标签 -->
      <el-tag :key="tag.bookTypeId" v-for="tag in bookType" closable @close="handleTagClose(tag)" @click.native="goToType(tag.bookTypeId,tag.bookTypeMark)">
        {{tag.bookTypeName}}
      </el-tag>
      <!-- 输入文本框 -->
      <el-row v-if="inputVisible">
        <el-input placeholder="输入bookTypeMark" class="input_tag" v-model="inputbookTypeMark" ref="saveTagInput1" size="small">
        </el-input>
        <el-input placeholder="输入bookTypeName" class="input_tag" v-model="inputbookTypeName" ref="saveTagInput2" size="small"
          @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
        </el-input>
      </el-row>
      <!-- 添加的按钮 -->
      <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Type</el-button>
    </el-drawer>
    <!-- 添加书对话框 -->
    <el-dialog title="Add Book" :visible.sync="addDialogVisible" width="40%" @close="addDialogClosed" class="addDialog">
      <el-row>
        <el-col :span="10">
          <!-- 表单区域 -->
          <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" size="small" label-position="top">
            <el-form-item label="Book title:" prop="bookName">
              <el-input v-model="addForm.bookName"></el-input>
            </el-form-item>
            <el-form-item label="Book price:" prop="bookPrice">
              <el-input v-model="addForm.bookPrice">
                <template slot="prepend">$</template>
              </el-input>
            </el-form-item>
            <el-form-item label="Book author:" prop="bookAuthor">
              <el-input v-model="addForm.bookAuthor"></el-input>
            </el-form-item>
            <el-form-item label="Book publisher:" prop="bookPublisher">
              <el-input v-model="addForm.bookPublisher"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="8" :offset="5">
          <!-- 图片区域 -->
          <!-- <div class="avatar" > -->
          <!-- <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              >
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <el-button type="text">Upload cover</el-button> -->
        </el-col>
      </el-row>
      <!-- 底部按钮区 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addBook">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import qs from 'qs'
  export default {
    data() {
      return {
        // 添加书本对话框显示与隐藏
        addDialogVisible: false,
        // 抽屉的显示与隐藏
        drawer: false,
        // 抽屉方向
        direction: 'ttb',
        // 抽屉中tag和input切换
        inputVisible: false,
        // 添加副本对话框显示与隐藏
        addCopyVisible: false,
        // 添加书本信息表单
        addForm: {
          bookType: 0,
          bookName: '',
          bookPrice: '',
          bookAuthor: '',
          bookPublisher: ''
        },
        // 添加书本验证规则
        addFormRules: {
          bookType: [],
          bookName: [{
            required: true,
            message: 'Please enter the name of your book',
            trigger: 'blur'
          }, ],
          bookPrice: [{
            required: true,
            message: 'Please enter the price of your book',
            trigger: 'blur'
          }, ],
          bookAuthor: [{
            required: true,
            message: 'Please enter the author of your book',
            trigger: 'blur'
          }, ],
          bookPublisher: [{
            required: true,
            message: 'Please enter the publisher of your book',
            trigger: 'blur'
          }, ]
        },
        // 获取到的某一类所有书列表
        bookList: [],
        // 获取到的所有书的种类
        bookType: [],
        // 文本框中输入的内容
        inputbookTypeMark: '',
        // 文本框中输入的内容
        inputbookTypeName: '',
        // 刷新列表
        flushBookTypeMark:'',
        // 刷新存储id
        flushBookTypeId:'6'
      }
    },
    created() {
      this.getBookList('as-su')
      this.getMenuList()
    },
    methods: {
      // 点击后 显示添加一本书对话框
      showAddBox() {
        this.addDialogVisible = true
      },
      // 获取所有图书种类 生成标签
      async getMenuList() {
        const {
          data: res
        } = await this.$http.get('bookTypes')
        if (res.errorCode !== 0) {
          // 登录失败
          return this.$message.error('获取列表失败')
        }
        // 获取列表成功
        this.bookType = res.data
      },
      // 点击种类标签后 跳转到具体某一类书下
      goToType(bookTypeId,bookTypeMark) {
        this.addForm.bookType = bookTypeId
        // 关闭抽屉
        this.handleClose()
        // 获取该类图书
        this.flushBookTypeMark = bookTypeMark
        this.flushBookTypeId = bookTypeId
        this.getBookList(bookTypeMark)
      },
      // 文本框失去焦点或enter键 都会触发
      handleInputConfirm() {
        // 输入内容为空 则清除
        if (this.inputbookTypeMark.trim().length == 0 || this.inputbookTypeName.trim().length == 0) {
          this.inputbookTypeMark = ''
          this.inputbookTypeName = ''
          this.inputVisible = false
          return
        }
        // 输入正确 后续处理
        this.addType()
        // 刷新列表
        this.getMenuList()
        // 隐藏输入框
        this.inputVisible = false
      },
      // 点击按钮 切换显示
      showInput() {
        // 显示
        this.inputVisible = true
        // 自动获取焦点
        this.$nextTick(_ => {
          this.$refs.saveTagInput1.$refs.input.focus()
        })
      },
      // 获取某一类所有书信息
      async getBookList(id) {
        const {
          data: res
        } = await this.$http.get(`searchBy?bookTypeMarks=${id}&page=1`)
        if (res.errorCode !== 0) {
          // 登录失败
          return this.$message.error('获取列表失败')
        }
        // 获取列表成功
        this.bookList = res.data
      },
      // 添加图书种类
      async addType() {
        this.$http({
          url: 'librarian/bookType/add',
          method: 'POST',
          data: qs.stringify({
            bookTypeMark: this.inputbookTypeMark,
            bookTypeName: this.inputbookTypeName,
          }),
          withCredentials: true
        }).then(res => {
          this.addDialogVisible = false
          this.$message.success('添加成功')
        }).catch(err => {
          this.$message.error('添加失败')
        })
      },
      // 关闭抽屉
      handleClose(done) {
        this.drawer = false
      },
      // 点击按钮 提交添加书表单
      async addBook() {
        this.$http({
          url: 'book/info',
          method: 'POST',
          data: qs.stringify({
            bookType: this.addForm.bookType,
            bookName: this.addForm.bookName,
            bookPrice: this.addForm.bookPrice,
            bookAuthor: this.addForm.bookAuthor,
            bookPublisher: this.addForm.bookPublisher
          }),
          withCredentials: true
        }).then(res => {
          this.$message.success('添加成功')
          this.addDialogVisible = false
        }).catch(err => {
          this.$message.error('添加失败')
        })
        // 刷新列表
        this.getBookList(this.flushBookTypeMark)
      },
      // 点击按钮 删除此图书
      async deleteBook(bookid) {
        // 询问
        const confrimResult = await this.$confirm(
          'This operation will remove this book in library permanently, continue?',
          'Tip', {
            confirmButtonText: 'Yes',
            cancelButtonText: 'No',
            type: 'warning'
          },
        ).catch(err => {
          return err
        })
        if (confrimResult !== 'confirm') {
          // 取消删除
          return this.$message.info('cancel')
        }
        // 确认删除
        this.$http({
          url: '/book/info/' + bookid,
          method: 'DELETE',
          withCredentials: true
        }).then(res => {
          this.$message.success('success')
          // 刷新列表
          this.getBookList(this.flushBookTypeMark)
        }).catch(err => {
          return this.$message.error('error')
        })
      },
      // 添加对话框关闭
      addDialogClosed() {
        // 清理验证信息
        this.$refs.addFormRef.resetFields()
      },
      // 点击按钮 调至书的详情页面
      goToDetail(bookId) {
        this.$router.push('/detail/'+this.flushBookTypeId+'/'+bookId)
      },












/********************************************************************************/


      // 点击关闭标签->删除种类
      async handleTagClose(tag) {
        const confrimResult = await this.$confirm('你确定要删除该分类么?',
          'Tip', {
            confirmButtonText: 'Yes',
            cancelButtonText: 'No',
            type: 'warning'
          },
        ).catch(err => {
          return err
        })
        if (confrimResult !== 'confirm') {
          return this.$message.info('cancel')
        }
        // 调用删除函数
        this.$message.success('success')
      },

    },
  }
</script>

<style lang="less" scoped>
  /*********查看分类抽屉start***************/
  // 抽屉中每个tag边距
  .el-drawer .el-tag {
    margin: 10px;
  }

  // 抽屉中文本输入框
  .input_tag {
    // 控制宽度
    width: 150px;
  }

  /*********查看分类抽屉end***************/


  /**********添加对话框start*************/
  .addDialog {
    position: absolute;
  }

  /**********添加对话框end*************/
  /*******头像上传*******/
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar {
    border: 2px dashed #000;
    background-color: #3d3d3d;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #c6c6c6;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  /*******头像上传*******/
</style>
